<template>
	<view class="container">
		<!-- #ifndef H5 -->
		<u-navbar bgColor="#fa2209" :fixed="false" leftIcon=" " :autoBack="false"></u-navbar>
		<!-- #endif -->

		<!-- 搜索栏 -->
		<view class="search-box">
			<u-icon name="scan" color="#ddd" size="28" @click="onScan()"></u-icon>
			<u-search height=24 bgColor="#fff" placeholder="搜索商品/店铺" :disabled="true" :showAction="false"
				v-model="keyword" @click="$navTo('pages/search/index')"></u-search>
			<u-icon name="chat" color="#fff" size="28" @click="onMessage()"></u-icon>
		</view>

		<u-skeleton rows="10" :loading="loading">
			<!-- 页面模板数据渲染 -->
			<view v-for="(template_item,index) in template" :key="index">
				<!-- 模板封装 -->
				<lrw-template :temp_code="template_item.temp_code" :temp_data="template_item.data"></lrw-template>
			</view>
		</u-skeleton>

		<u-gap height="10"></u-gap>

	</view>
</template>

<script>
	import {
		setCartTabBadge
	} from '@/core/app'
	import * as Api from '@/api/home'

	const App = getApp()

	export default {
		components: {
			// Page
		},
		data() {
			return {
				// 页面参数
				options: {},
				keyword: '',
				// 页面装修数据
				template: [],
				loading: true,
				// socket 
				socketOpen: false,
				socketMsgQueue: []
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 当前页面参数
			this.options = options
			// 加载页面数据
			this.getPageData();

		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			// 更新购物车角标
			setCartTabBadge()
		},

		methods: {
			/**
			 * 加载页面数据
			 * @param {Object} callback
			 */
			getPageData(callback) {
				const app = this
				Api.index()
					.then(result => {
						// 设置页面数据
						// const { data: { pageData } } = result
						// app.page = pageData.page
						// app.items = pageData.items
						const {
							data: {
								template
							}
						} = result;
						app.template = template;

						// console.log(app.template)
						// 设置顶部导航栏栏
						app.setPageBar();

						app.loading = false;
					})
					.finally(() => callback && callback())
			},

			/**
			 * 设置顶部导航栏
			 */
			setPageBar() {
				const {
					page
				} = this
				// 设置页面标题
				uni.setNavigationBarTitle({
					title: '首页'
				});
				// 设置navbar标题、颜色
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff'
				})
			},
			
			onScan(){
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			onMessage(){
				console.log('消息列表')
			}

		},

		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			// 获取首页数据
			this.getPageData(() => {
				uni.stopPullDownRefresh()
			})
		},

		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			const app = this
			const {
				page
			} = app
			return {
				title: page.params.share_title,
				path: "/pages/index/index?" + app.$getShareUrlParams()
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			const app = this
			const {
				page
			} = app
			return {
				title: page.params.share_title,
				path: "/pages/index/index?" + app.$getShareUrlParams()
			}
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		background: #fff;
	}

	.search-box {
		background: #fa2209;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		height: 36px;

		/* #ifndef H5 */
		// margin-top: 68px;
		/* #endif */

	}
	
</style>
